import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                fac.AntdTitle(
                    '云智一体的全栈产品与服务',
                    level=2
                ),
                html.A(
                    '全部智能云产品'
                )
            ],
            style={
                'textAlign': 'center',
                'paddingBottom': '50px'
            }
        ),
        html.Div(
            [
                html.Div(
                    [
                        fac.AntdSpace(
                            [
                                '人工智能 >',
                                fac.AntdSpace(
                                    [
                                        html.A(
                                            '人脸识别',
                                            style={
                                                'color': '#596178',
                                                'opacity': 0.7
                                            }
                                        ),
                                        html.A(
                                            '文字识别',
                                            style={
                                                'color': '#596178',
                                                'opacity': 0.7
                                            }
                                        )
                                    ],
                                    addSplitLine=True
                                )
                            ],
                            className='side-box',
                            direction='vertical'
                        )
                    ] * 7,
                    style={
                        'width': '312px',
                        'background': '#edf1fc'
                    }
                ),
                fac.AntdRow(
                    [
                        fac.AntdCol(
                            fac.AntdSpace(
                                [
                                    fac.AntdTitle(
                                        '轻量应用服务器',
                                        level=3,
                                        style={
                                            'fontWeight': '500'
                                        }
                                    ),
                                    fac.AntdSpace(
                                        [
                                            html.Span(
                                                '价格低廉',
                                                style={
                                                    'color': '#2468f2',
                                                    'border': '1px solid #2468f2',
                                                    'padding': '3px 10px',
                                                    'borderRadius': '4px'
                                                }
                                            ),
                                            html.Span(
                                                '价格低廉',
                                                style={
                                                    'color': 'rgb(89, 97, 120)',
                                                    'border': '1px solid rgb(209, 216, 228)',
                                                    'padding': '3px 10px',
                                                    'borderRadius': '4px'
                                                }
                                            )
                                        ]
                                    ),
                                    html.Span(
                                        '高性能、高可靠、安全稳定的弹性计算服务',
                                        style={
                                            'color': 'rgb(89, 97, 120)'
                                        }
                                    ),
                                    html.Span(
                                        [
                                            fac.AntdText(
                                                '限时',
                                                style={
                                                    'color': 'rgb(199, 183, 191)'
                                                }
                                            ),
                                            fac.AntdText(
                                                2.9,
                                                style={
                                                    'fontSize': '24px',
                                                    'color': '#ff502e',
                                                    'lineHeight': '24px',
                                                    'fontWeight': '700',
                                                    'padding': '0 5px 0 5px'
                                                }
                                            ),
                                            fac.AntdText(
                                                '折起',
                                                style={
                                                    'color': 'rgb(199, 183, 191)'
                                                }
                                            )
                                        ]
                                    )
                                ],
                                direction='vertical'
                            ),
                            style={
                                'background': 'white',
                                'height': '210px',
                                'borderRight': 'none' if i in [2, 5, 8] else '1px solid #e8e8e8',
                                'borderBottom': '1px solid #e8e8e8',
                                'padding': '20px 50px 0 20px'
                            },
                            span=8
                        )
                        for i in range(9)
                    ],
                    style={
                        'width': '100%',
                        'background': 'transparent'
                    }
                )
            ],
            style={
                'display': 'flex',
                'width': '1180px',
                'boxShadow': '5px 1px 16px -2px rgb(218 221 231 / 70%)',
                'position': 'absolute',
                'left': '50%',
                'transform': 'translateX(-50%)'
            }
        )
    ],
    style={
        'background': 'rgb(246, 247, 250)',
        'position': 'relative',
        'height': '100vh',
        'padding': '50px 0'
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)
